import React from 'react';
import { useNavigate } from 'react-router-dom';
import { Box, ShoppingBag, TrendingUp } from 'lucide-react';

export default function Home() {
  const navigate = useNavigate();
  
  const features = [
    {
      icon: Box,
      title: "盒子管理",
      description: "按寝室管理零食",
      action: () => navigate('/boxes')
    },
    {
      icon: ShoppingBag,
      title: "便捷订购",
      description: "快速简单的零食购买",
      action: () => navigate('/boxes')
    },
    {
      icon: TrendingUp,
      title: "库存控制",
      description: "跟踪管理零食库存",
      action: () => navigate('/manage')
    }
  ];

  return (
    <div className="space-y-6">
      <div className="bg-gradient-to-r from-indigo-500 to-purple-600 rounded-2xl p-6 text-white">
        <h1 className="text-3xl font-bold mb-2">欢迎使用零食盒</h1>
        <p className="opacity-90">您的宿舍零食管理解决方案</p>
      </div>

      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
        {features.map((feature, index) => (
          <button
            key={index}
            onClick={feature.action}
            className="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition-shadow"
          >
            <feature.icon className="h-8 w-8 text-indigo-600 mb-4" />
            <h3 className="text-lg font-semibold mb-2">{feature.title}</h3>
            <p className="text-gray-600">{feature.description}</p>
          </button>
        ))}
      </div>
    </div>
  );
}